<template>
  <page-meta>
    <navigation-bar
      title="悬赏问答"
      background-color="#5896f5"
    />
  </page-meta>
  <view>
    <!-- 广告位 -->
    <ad-bar />
    <!-- 分段器 -->
    <view class="uni-padding-wrap uni-common-mt">
      <uni-segmented-control
        :current="currentItem"
        :values="titleItems"
        style-type="text"
        active-color="#007aff"
        @clickItem="onClickItem"
      />
    </view>
    <view class="content">
      <new-questions
        v-if="drawCard[0]"
        v-show="showCard[0]"
        ref="newQuestions"
      />
      <hot-questions
        v-if="drawCard[1]"
        v-show="showCard[1]"
        ref="hotQuestions"
      />
      <wait-questions
        v-if="drawCard[2]"
        v-show="showCard[2]"
        ref="waitQuestions"
      />
    </view>
  </view>
</template>

<script>
import hotQuestions from './module/hotQuestions.vue'
import newQuestions from './module/newQuestions.vue'
import waitQuestions from './module/waitQuestions.vue'
import adBar from '@/components/adBar.vue'
export default {
  components: {
    hotQuestions,
    waitQuestions,
    newQuestions,
    adBar
  },
  data() {
    return {
      titleItems: ['最新', '热门', '待回答'],
      drawCard: [true, false, false],
      showCard: [true, false, false],
      currentItem: 0
    }
  },
  methods: {
    onClickItem(e) {
      if (this.currentItem === e.currentIndex) {
        return // 重复点击不生效
      }
      // 将上一张卡片隐藏
      this.showCard[this.currentItem] = false
      // 切换下一张卡片显示
      this.drawCard[e.currentIndex] = true
      this.showCard[e.currentIndex] = true
      // 更新索引
      this.currentItem = e.currentIndex
    }		
  },
  // 上拉触底监听
  onReachBottom() {
    switch (this.currentItem) {
      case 0:
        this.$refs.newQuestions.getMore()
        break
      case 1:
        this.$refs.hotQuestions.getMore()
        break
      case 2:
        this.$refs.waitQuestions.getMore()
        break
    }
  }
}
</script>

